<template>
	<view class="login-container">
		<h2>用户登录</h2>
		    <form @submit="formSubmit">
		      <view class="input-group">
		        <text>用户名:</text>
		        <input type="text" v-model="username" placeholder="请输入用户名" />
		      </view>
		      <view class="input-group">
		        <text>密码:</text>
		        <input type="password" v-model="password" placeholder="请输入密码" />
		      </view>
		      <button form-type="submit" class="submit-btn">登录</button>
		    </form>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				username: '',
				      password: ''
				    };
			
		},
		methods: {
			formSubmit(e) {
			      // 阻止表单默认提交行为
			      e.preventDefault();
			
			      // 获取表单数据
			      const { username, password } = this;
			
			      // 这里可以添加你的登录逻辑，例如调用 API 进行验证
			      console.log('尝试登录:', { username, password });
			      uni.showToast({
			        title: '登录成功！',
			        icon: 'success'
			      });
			    }
			  }
			};
</script>

<style>
.login-container {
  font-family: Arial, sans-serif;
  background-color: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  width: 300px;
  margin: auto;
  margin-top: 100px;
}
.input-group {
  margin-bottom: 15px;
}
.submit-btn {
  width: 100%;
  padding: 10px;
  background-color: #007bff;
  color: white;
  border: none;
  cursor: pointer;
}
.submit-btn:hover {
  background-color: #0056b3;
}
</style>
